<template>
  <div id="register">
      <div class="logo">
          <img src="../../static/img/register/logo.png" alt="" width="60%">
          <div class="xz">
            <img src="../../static/img/register/xz.png" alt="" width="50%">
          </div>
          <div class="bg">
            <img src="../../static/img/register/bg.png" alt="" width="90%">
          </div> 
          <p>权限审批、数据校验、最新消息通知</p>
          <p>完善的后台管理</p>         
      </div>
      <div class="register" @click="register()">
          立即注册
      </div>
      <mt-popup v-model="popupVisible" popup-transition="popup-fade" class="Interface">
          <p class="title">注册</p>
          <div>
              <input v-on:input="telShow()" v-model="tel" type="tel" class="inputTel" placeholder="请输入手机号码" autofocus="autofocus" maxlength="11" oninput='this.value=this.value.replace(/\D/gi,"")' />
              <hr />
          </div>    
          <button class="confirm" :class="disabledClass" v-bind:disabled="disabled" @click="verification()">下一步</button>    
      </mt-popup>
      <mt-popup v-model="popupVisible2" popup-transition="popup-fade" class="Interface">
          <p class="title">输入验证码</p>
          <p class="verCode">验证码发送至 {{tel}}</p>
          <div class="again">
              <button class="dxyz" v-bind:disabled="disabled2" @click="cxCode()">{{dxyz}}</button>
          </div>
          <div class="user-input">
              <input v-model="verCode" type="tel" maxlength="4" class="realInput" autofocus="autofocus" oninput='this.value=this.value.replace(/\D/gi,"")' v-on:input="verCodeShow()" />
              <div class="bogusInput">
                  <input v-model="remVc[0]" type="text" maxlength="4" disabled/>
				  <input v-model="remVc[1]" type="text" maxlength="4" disabled/>
                  <input v-model="remVc[2]" type="text" maxlength="4" disabled/>
                  <input v-model="remVc[3]" type="text" maxlength="4" disabled/>
              </div>
		  </div>
      </mt-popup>     
      <!-- 注册动画 -->
      <div class="trialani" v-show="trialani">
        <img :src="trialImg" alt="" width="45%">
        <p v-text="trialtext"></p>
      </div>
      <!-- end --> 
  </div>
</template>

<script>
import store from "@/store/store.js";
import trialImg from "../../static/img/BusinessSub/33.png";
import trialImgT from "../../static/img/BusinessSub/complete.gif";
import trialImgF from "../../static/img/BusinessSub/completeF.gif";
import { Popup, Field } from "mint-ui";
import { setInterval, clearInterval } from "timers";
export default {
  name: "register",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      popupVisible: false,
      popupVisible2: false,
      disabled: true,
      disabled2: false,
      disabledClass: "disabled",
      tel: "",
      verCode: "",
      remVc: [],
      dxyz: "重新发送",
      trialani: false,
      trialtext: "",
      trialImg: "../../static/img/BusinessSub/33.png",
      trialImgT: "../../static/img/BusinessSub/complete.gif",
      trialImgF: "../../static/img/BusinessSub/completeF.gif",
      wxid: ""
    };
  },
  methods: {
    // 弹出注册
    register: function() {
      this.popupVisible = true;
    },
    // 获取短信验证
    verification: function() {
      this.popupVisible = false;
      setTimeout(() => {
        this.popupVisible2 = true;
      }, 200);
      this.$http
        .get(
          this.Url + "action_type=GetSMSIdentityCode&action_data=" + this.tel
        )
        .then(response => {
          alert(JSON.stringify(response))
          //alert(store.state.openid)
          // success callback
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 验证码功能
    verCodeShow: function() {
      this.remVc = [];
      let verCodeArr = this.verCode.split("");
      for (let i = 0; i < verCodeArr.length; i++) {
        this.remVc[i] = verCodeArr[i];
      }
      if (this.verCode.length == 4) {
        this.popupVisible2 = false;
        this.$http
          .get(
            this.Url +
              "action_type=SearchSMSIdentityCode&action_data=" +
              this.tel +
              "&action_record=" +
              this.verCode
          )
          .then(response => {
            alert(JSON.stringify(response))
            // success callback
            if (response.data.SMSIdentity.length > 0) {
              this.$http
                .get(
                  this.Url +
                    "action_type=GetMembership_ID&action_data=" +
                    this.tel +
                    "&action_record=" +
                    store.state.openid +
                    "&RegisterType=6000&WECHATPUBLICSIGN_ID=3"
                )
                .then(response => {
                  alert(JSON.stringify(response))
                  // success callback
                  if (response.data.WechatInfoObject.length > 0) {
                    alert(JSON.stringify(response.data))
                    this.trialani = true;
                    this.trialImg = trialImgT;
                    this.trialtext = "注册成功";
                    this.wxid = response.data.WechatInfoObject[0].RTWECHATPUSH_ID;
                    store.commit("getWxid", this.wxid); // wxid存入store,全局调用
                    setTimeout(() => {
                      this.trialani = false;
                      this.trialImg = trialImg;
                      this.$router.push({ path: "/Homepage" }); //进入主界面
                    }, 2000);
                  } else {
                    this.trialani = true;
                    this.trialImg = trialImgF;
                    this.trialtext = response.data;
                    setTimeout(() => {
                      this.trialani = false;
                      this.trialImg = trialImg;
                    }, 2000);
                  }
                })
                .catch(error => {
                  // console.log(error);
                });
            } else {
              this.trialani = true;
              this.trialImg = trialImgF;
              this.trialtext = "验证失败";
              setTimeout(() => {
                this.trialani = false;
                this.trialImg = trialImg;
              }, 2000);
            }
          })
          .catch(error => {
            // console.log(error);
          });
      }
    },
    // 电话验证
    telShow: function() {
      if (
        !/^(17[0-9]|13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
          this.tel
        )
      ) {
        this.disabledClass = "disabled";
        this.disabled = true;
      } else {
        this.disabledClass = "";
        this.disabled = false;
      }
    },
    // 重新获取验证码
    cxCode: function() {
      this.disabled2 = true;
      let time = 60;
      let seti = setInterval(() => {
        if (time == 0) {
          this.dxyz = "重新发送";
          this.disabled2 = false;
          clearInterval(seti);
        } else {
          time--;
          this.dxyz = "(" + time + "s)后发送";
        }
      }, 1000);
      this.$http
        .get(
          this.Url + "action_type=GetSMSIdentityCode&action_data=" + this.tel
        )
        .then(response => {
          // success callback
        })
        .catch(error => {
          // console.log(error);
        });
    }
  },
  created() {}
};
</script>

<style scoped>
hr {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}
.logo {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.xz {
  margin-top: 0.5rem;
}
.logo p {
  font-size: 14px;
  color: #4c4b59;
}
.register {
  width: 90%;
  height: 2rem;
  line-height: 2rem;
  border-radius: 2px;
  background-color: #4c4b59;
  margin: 1rem auto;
  text-align: center;
  color: #fff;
}
.Interface {
  width: 75%;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
}
.title {
  text-align: center;
  font-size: 16px;
  margin-top: 2rem;
}
.inputTel {
  width: 100%;
  border: none #fff;
  outline: none;
  text-align: center;
  margin: 0 auto;
  margin-top: 1.7rem;
  font-size: 14px;
}
.confirm {
  width: 100%;
  border: none;
  background-color: #4c4b5b;
  color: #fff;
  height: 2rem;
  font-size: 16px;
  outline: none;
}
.disabled {
  opacity: 0.3;
}
.verCode {
  color: #999;
  font-size: 12px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.again {
  margin: 0 auto;
  margin-bottom: 1rem;
}
.dxyz {
  width: 4rem;
  height: 1.5rem;
  font-size: 12px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background-color: #fff;
  color: #959595;
  outline: none;
}
.user-input {
  margin: 1rem auto;
  padding-left: 0.5rem;
  position: relative;
}
.realInput {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
}
.bogusInput > input[disabled] {
  color: black;
  opacity: 1;
}
.bogusInput > input {
  display: inline-block;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  text-align: center;
  font-size: 26px;
  background-color: #fff;
}
.trialani {
  width: 10rem;
  height: 6rem;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 42%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
</style>

